<template>
  <div class="registration-form">
    <!--    第一个卡片-->
    <el-card>
      <div class="desc-box">
        <div class="title">用户授权书列表</div>
        <div class="desc">您可以对用户授权书列表进行增删改查操作！</div>
      </div>
      <div class="use-box">
        <div>
          <el-button class="add-button" type="primary" @click="openDialogComponent(0)">添加用户授权书</el-button>
        </div>
        <div class="search-box">
          <div class="phone-box">
            <span class="search-name">用户手机 :</span>
            <el-input v-model="queryInfo.Phone" placeholder="请输入用户手机号码"
                      clearable @clear="getTableList"
            ></el-input>
          </div>
          <div class="phone-box">
            <span class="search-name">身份证号 :</span>
            <el-input v-model="queryInfo.IdentityID" placeholder="请输入用户身份证号码"
                      clearable @clear="getTableList"
            ></el-input>
          </div>
          <div class="search-input">
            <span class="search-name">录入方式 :</span>
            <el-select v-model="queryInfo.SaveMode" placeholder="请选择录入方式">
              <el-option label="-----查询全部-----" :value="-1"></el-option>
              <el-option v-for="(item,index) in saveModeData" :key="index"
                         :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            <el-button type="primary" class="search-button"
                       @click="getTableList()">查询
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <!--    第二个卡片-->
    <el-card class="second-card">
      <el-table
        ref="table"
        border
        max-height="530px"
        v-loading="loading"
        element-loading-text="拼命加载中......"
        :data="tableList"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        :header-cell-class-name="setHeaderRowClassName"
      >
        <el-table-column type="index" label="序号" fixed></el-table-column>
        <el-table-column prop="Subject" label="报名学科" width="180px"></el-table-column>
        <el-table-column prop="Name" label="用户姓名"></el-table-column>
        <el-table-column prop="Phone" label="用户手机" width="120px"></el-table-column>
        <el-table-column prop="IdentityID" label="身份证号" width="200px"></el-table-column>
        <el-table-column prop="Address" label="家庭住址" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="Sex" label="性别">
          <el-tag slot-scope="scope" type="danger" effect="plain" v-if="scope.row.Sex==='女'">{{ scope.row.Sex }}
          </el-tag>
          <el-tag slot-scope="scope" effect="plain" v-else>{{ scope.row.Sex }}</el-tag>
        </el-table-column>
        <el-table-column prop="Birthday" label="年龄">
          <p slot-scope="scope">{{ scope.row.Birthday |getAge }}</p>
        </el-table-column>
        <el-table-column prop="RelativesName" label="联系人姓名" width="100px"></el-table-column>
        <el-table-column prop="Relation" label="联系人关系" width="100px"></el-table-column>
        <el-table-column prop="RelativesPhone" label="联系人电话" width="120px"></el-table-column>
        <el-table-column label="个人头像" width="150px">
          <el-image
            slot-scope="scope"
            v-if="scope.row.Image!==undefined"
            :src="queryInfo.imageUrl+scope.row.Image"
            style="max-width: 100px; max-height: 100px"
            :preview-src-list="previewImageSrcList"
          ></el-image>
        </el-table-column>
        <el-table-column label="签字图片" width="150px">
          <el-image
            slot-scope="scope"
            v-if="scope.row.Image!==undefined"
            :src="queryInfo.imageUrl+scope.row.SignatureImage"
            style="max-width: 100px; max-height: 100px"
            :preview-src-list="previewSingSrcList"
          ></el-image>
        </el-table-column>

        <el-table-column label="身份证正面" width="150px">
          <el-image
            slot-scope="scope"
            v-if="scope.row.Image!==undefined"
            :src="queryInfo.imageUrl+scope.row.FrontCard"
            style="max-width: 100px; max-height: 100px"
            :preview-src-list="previewFrontCardSrcList"
          ></el-image>
        </el-table-column>

        <el-table-column prop="CreationTime" label="详情创建时间" :formatter="dateFormat" width="150px"></el-table-column>
        <el-table-column label="线下购买" width="120px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="offlinePayment(scope.row)">线下购买</el-button>
          </template>

        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="openDialogComponent(scope.row.ID)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteInfo(scope.row.ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>
    </el-card>
    <!--  添加和编辑的对话框-->
    <add-and-edit-dialog
      v-if="isShowDialogComponent"
      :is-show-dialog-component="isShowDialogComponent"
      @handleClose="handleClose"
      :judge-id="judgeId"
      :title="title"
    ></add-and-edit-dialog>

    <!--    购买课程组件-->
    <offline-payment-dialog
      v-if="isShowOfflinePaymentDialog"
      :is-show-offline-payment-dialog="isShowOfflinePaymentDialog"
      @handleOfflinePaymentClose="handleOfflinePaymentClose"
      :main-id="mainId"
      :row-info="rowInfo"
    >
    </offline-payment-dialog>


  </div>
</template>

<script>
//引入添加编辑对话框组件
import AddAndEditDialog from './childComps/AddAndEditDialog'
//引入购买课程组件
import OfflinePaymentDialog from './childComps/OfflinePaymentDialog'
//引入封装接口的类
import RegistrationForm from '../../model/registrationForm'
//引入分页的组件
import Pagination from '../../components/base/pagination/Pagination'
//时间戳
import moment from 'moment'
//引入计算年龄的方法
import { getAge } from '../../ck/mixins/mixin'

export default {
  name: 'RegistrationFrom',
  components: {
    AddAndEditDialog,
    OfflinePaymentDialog,
    Pagination

  },
  //引入时间转换的方法
  mixins: [getAge],
  data () {
    return {
      loading: false,
      title: '',
      judgeId: 0,
      isShowDialogComponent: false,
      //控制线下购买按钮对话框的显示与隐藏
      isShowOfflinePaymentDialog: false,
      //购买课程需要的组件ID
      mainId: '',
      //保存获取到的基础学科信息
      subjectDataList: [],
      //保存获取到的基础课程信息
      curriculumDataList: [],
      //课程详情列表
      tableList: [],
      //获取列表需要传入的参数
      queryInfo: {
        Phone: '',
        IdentityID: '',
        SaveMode: -1,
        //保存图片前缀
        imageUrl: '',
        Page: 1,
        Limit: 10,
        total: 0
      },
      statusChangeForm: {
        id: '',
        status: ''
      },
      //查询条件中的录入方式数据
      saveModeData: [
        {
          label: ' PC管理端  ',
          value: 0
        },
        {
          label: '用户 ',
          value: 1
        },
        {
          label: '小程序管理端 ',
          value: 2
        },
      ],
      //人像大图预览
      previewImageSrcList: [],
      //签字图片大图预览
      previewSingSrcList: [],
      //身份证图片
      previewFrontCardSrcList: [],
      //给购买课程对话框展示数据的值
      rowInfo: [{}]
    }
  },

  created () {
    this.getTableList()
  },
  methods: {
    //时间戳
    dateFormat (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    //设置绑定学科的表头样式
    setHeaderRowClassName ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'setHeaderSubjectColumnName'
      }
    },
    handleClose (payload) {
      if (payload === 'submitButton') {
        this.getTableList()
      }
      this.isShowDialogComponent = false
    },
    //线下购买对话框发射的事件
    handleOfflinePaymentClose () {
      this.isShowOfflinePaymentDialog = false
    },
    //分页的回调
    callFather (value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage
      if (value.pageSize) this.queryInfo.Limit = value.pageSize
      this.getTableList()
    },
    //打开添加、编辑话框
    openDialogComponent (rowId) {
      this.title = rowId === 0 ? '添加用户授权书' : '查看用户授权书'
      this.judgeId = rowId
      this.isShowDialogComponent = true
    },
    //获取表格数据
    async getTableList () {
      try {
        this.loading = true
        const res = await RegistrationForm.PageSearch(this.queryInfo)
        console.log(res)
        this.loading = false
        this.tableList = res.ListData
        this.queryInfo.total = res.Total
        this.queryInfo.imageUrl = res.ImageUrl
        this.initImageUrlList()
      } catch (err) {
        this.loading = false
      }
    },
    initImageUrlList () {
      this.tableList.forEach(item => {
        if (!item.Image) {
        } else {
          this.previewImageSrcList.push(this.queryInfo.imageUrl + item.Image)
          this.previewSingSrcList.push(this.queryInfo.imageUrl + item.SignatureImage)
          this.previewFrontCardSrcList.push(this.queryInfo.imageUrl + item.FrontCard)
        }
      })
    },
    //删除操作
    async deleteInfo (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该用户授权书, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该用户授权书的操作')
      } else {
        await RegistrationForm.Delete({ ID: id })
        this.$message.success('成功删除该用户授权书')
        await this.getTableList()
      }
    },
    //点击购买按钮触发
    offlinePayment (rowInfo) {
      this.isShowOfflinePaymentDialog = true
      this.mainId = rowInfo.ID
      for (const i in rowInfo) {
        this.$set(this.rowInfo[0], i, rowInfo[i])
      }
    },
  }
}
</script>

<style scoped>
@import "../../../src/assets/style/realize/tableStyle.css";
.registration-form {
  background-color: #eee;
}
.el-card {
  box-shadow: none;
  margin-top: 10px;
}
.second-card {
  padding-bottom: 80px;
  position: relative;
}
.search-name {
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
  width: 90px;
  line-height: 40px;
}
.phone-box {
  display: flex;
}
.el-pagination {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
/deep/ .el-tag {
  border-radius: 0;
}
/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #E6E6FA !important;
  opacity: 0.7 !important;
}
/*描述文本域明显一些的样式，设置高度*/
/deep/ .el-textarea__inner {
  height: 150px;
}
</style>


